<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="/static/js/jquery-3.4.0.js"></script>
    <script src="/static/js/route.js"></script>
    <script type="application/javascript">
        // 预处理函数集合=========
        // 缩进导航栏
        $(function () {
            $("body").off("click",".collapse-btn")
                .on("click",".collapse-btn",function () {
                    animateNone($(this));
                });
            function animateNone(item) {
                if(item.hasClass("collapsed")){
                    $(".left-contain-box").css("width","200px");
                    $(".left-contain-box").css("display","initial");
                    $(".right-contain-box").css("margin-left","200px");
                    item.find("i").removeClass("fa-th-large").addClass("fa-th");
                    item.removeClass("collapsed");
                }else{
                    $(".left-contain-box").css("width","0px");
                    $(".left-contain-box").css("display","none");
                    $(".right-contain-box").css("margin-left","0px");
                    item.find("i").removeClass("fa-th").addClass("fa-th-large");
                    item.addClass("collapsed");
                }
            }
            function animateQuick(item) {
                $(".left-contain-box").stop();
                $(".right-contain-box").stop();
                if(item.hasClass("collapsed")){
                    $(".left-contain-box").animate({width:"200px"},"fast");
                    $(".right-contain-box").animate({
                        marginLeft:"200px"},"fast",function (){
                    });
                    item.children("i").removeClass("").addClass("");
                    item.removeClass("collapsed");
                }else{
                    $(".left-contain-box").animate({width:"0px"},"fast");
                    $(".right-contain-box").animate({
                        marginLeft:"0px"},"fast");
                    item.children("i").removeClass("").addClass("");
                    item.addClass("collapsed");
                }
            }
        })
        // 初始化页面渲染
        $(function (){
            //页面加载
            renderMenuHtmlItem(function () {
                activeUrl()
            });
            window.onpopstate = function() {
                renderMenuHtmlItem(function (){
                    activeUrl()
                });
            };
            //点击功能菜单跳转
            $("body").off("click",".left-contain-box .index-plane")
                .on("click",".left-contain-box .index-plane",function (){
                    $(window).attr('location', $(this).attr("data-url-pre")+$(this).attr("data-url"));
                })
            //点击菜单展开
            $("body").off("click",".left-contain-box .index-expand")
                .on("click",".left-contain-box .index-expand",function (){
                    //箭头转换
                    var activeItem=$("[data-parent='"+$(this).attr("data-name")+"']");
                    if($(this).children("i").hasClass("fa-angle-right")){
                        $(this).children("i").removeClass("fa-angle-right").addClass("fa-angle-down");
                    }else if($(this).children("i").hasClass("fa-angle-down")){
                        $(this).children("i").removeClass("fa-angle-down").addClass("fa-angle-right");
                        //子嗣全部缩起
                        activeItem.find("i").removeClass("fa-angle-down").addClass("fa-angle-right");
                    }
                    // //去除隐藏
                    var activeItem=$("[data-parent='"+$(this).attr("data-name")+"']");
                    if(activeItem.length>0){
                        var display=activeItem.css("display");
                        if("none"==display){
                            activeItem.css("display","initial");
                        }else{
                            activeItem.css("display","none");
                            activeItem.find(".sub-left-contain-box").css("display","none");
                        }
                    }
                });
            //
            //激活菜单项
            function activeUrl(){
                if(window.location.hash.length>0){
                    var urlRedirect=window.location.hash.substring(1);
                    //find
                    var item= $(".left-contain-box").find("[data-url='"+urlRedirect+"']");
                    if(item.length<1){
                        $(window).attr('location', "/#/main");
                        activeUrl();return;
                    }
                    //expand all parents
                    item.parents(".sub-left-contain-box").css("display","initial");
                    //modify li arrow tag
                    item.parents(".sub-left-contain-box").each(function (index,element){
                        var activeItem=$("[data-name='"+$(element).attr("data-parent")+"']");
                        activeItem.children("i").
                        removeClass("fa-angle-right").addClass("fa-angle-down");
                    });
                    //clear all other active
                    $(".left-contain-box li").removeClass("active");
                    item.addClass("active");
                    $.ajax({
                        url:urlRedirect,
                        type:"get",
                        success:function (result){
                            $(".middle-layer-box .right-contain-box").html(result);
                        }, error: function (jqXHR, textStatus, errorThrown) {
                            console.log("err_" + jqXHR.status + "_" + errorThrown);
                            if(404==jqXHR.status){
                                $(".middle-layer-box .right-contain-box").load("/error404");
                            }
                        }
                    })
                }else{
                    $(window).attr('location', "/#/main");
                    activeUrl();
                }
            }
            /**获取菜单MenuHtml
             *
             * @param fullHtml
             * @param data
             * @returns {*}
             */
            function getHtmlItem(fullHtml,data,layerCount,maxLayerCount){
                var htmlInit="";
                if(maxLayerCount<layerCount){
                    return fullHtml;
                }
                for(dataSingleName in data){
                    var itemDetail=data[dataSingleName];
                    if(undefined!=itemDetail['children']){
                        htmlInit+="<li data-name='"+itemDetail['name']+"' data-url-pre='#' data-url='"+itemDetail['path']+"'class='index-expand'>";
                        htmlInit+=itemDetail['name'];
                        htmlInit+="<i class=\"fa fa-angle-right\" aria-hidden=\"true\"></i>";
                        htmlInit+="</li>";
                        htmlInit+="<div " +
                            "style='display: none' " +
                            "data-parent='"+itemDetail['name']+"' class='sub-left-contain-box left-contain-box-l"+layerCount+"'>";
                        htmlInit+=getHtmlItem(fullHtml,itemDetail['children'],layerCount+1,maxLayerCount);
                        htmlInit+="</div>";
                    }else{
                        htmlInit+="<li data-name='"+itemDetail['name']+"' data-url-pre='#' data-url='"+itemDetail['path']+"' class='index-plane'>";
                        htmlInit+= itemDetail['name']
                        htmlInit+="</li>";
                    }
                }
                return fullHtml+htmlInit;
            }

            /**渲染菜单
             *
             * @param callback
             */
            function renderMenuHtmlItem(callback){
                //读取渲染菜单
                    var fullHtml="";
                    fullHtml=getHtmlItem(fullHtml,menuJSON2,1,3);//最大3层菜单.
                    $(".left-contain-box").children("ul").html(fullHtml);
                    //callback
                    callback();
            }
        })




    </script>
    <link rel="stylesheet" href="/static/css/font-awesome.css"/>

    <style type="text/css">
        html,body { height: 100%; padding: 0; margin: 0;
            overflow: hidden;
        }
        .left-contain-box{
            width:200px;
            height: 100%;
            float: left;
            background-color: #333333;
            position: fixed;
            overflow-y: auto;
        }
        .right-contain-box{
            margin-left: 200px;
            padding-bottom: 40px;
            overflow: auto;
        }
        .full-screen-box{
            height: 100%;
        }
        .top-layer-box{
            background-color: #336699;
            height: 50px;
            position: fixed;
            top: 0;
            margin-top: 0;
            right: 0;
            left: 0;
            z-index: 1000;
        }
        .middle-layer-box{
            background-color: #f2f2f2;
            height: 100%;
            z-index: 998;
            overflow: auto;
        }
        .bottom-layer-box{
            /*background-color: #003366;*/
            height: 40px;
            position: fixed;
            bottom: 0;
            margin-bottom: 0;
            right: 0;
            left: 0;
            z-index: 999;
            border: #003366 1px solid;
            background-color: #f2f2f2;
        }
        .bottom-layer-box .main-content-box{

        }




/*一级菜单*/
        .left-contain-box ul{
            padding: 0;
            margin: 0;
        }
        .left-contain-box ul li.active{
            cursor: pointer;
            color: white;
            background-color: #0099CC;
            border-left: 5px white solid;
            border-right: 5px #0099CC solid;
        }



        .left-contain-box li{
           font-family: "Microsoft YaHei UI";
           text-align: center;
           padding-top: 10px;
           padding-bottom: 10px;
            font-size: 16px;
            background-color: #333333;
            list-style: none;
            border-left: 5px #333333 solid;
           border-right: 5px #333333 solid;
            color: gainsboro;
        }

        .left-contain-box i{
            width: 5px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            color: gainsboro;
            margin-right: 10px;
            float: right;
        }
        .left-contain-box li:hover{
            cursor: pointer;
            color: white;
            background-color: #0099CC;
            border-left: 5px white solid;
            border-right: 5px #0099CC solid;
        }
/*二级菜单*/
        .left-contain-box-l1 ul{
            padding: 0;
            margin: 0;
        }
        .left-contain-box-l1 li{
            font-family: "Microsoft YaHei UI";
            text-align: center;
            padding-top: 8px;
            padding-bottom: 8px;
            font-size: 16px;
            background-color: black;
            list-style: none;
            border-left: 5px black solid;
            border-right: 5px black solid;
            color: gainsboro;
        }
        .left-contain-box-l1 i{
            width: 5px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            color: gainsboro;
            margin-right: 10px;
            float: right;
        }
        .left-contain-box-l1 li:hover{
            cursor: pointer;
            color: white;
            background-color: #0099CC;
            border-left: 5px white solid;
            border-right: 5px #0099CC solid;
        }
        /*三级菜单*/
        .left-contain-box-l2 ul{
            padding: 0;
            margin: 0;
        }
        .left-contain-box-l2 li{
            font-family: "Microsoft YaHei UI";
            text-align: center;
            padding-top: 5px;
            padding-bottom: 5px;
            font-size: 14px;
            background-color: black;
            list-style: none;
            border-left: 5px black solid;
            border-right: 5px black solid;
            border-top: #333333 1px solid;
            color: gainsboro;
        }
        .left-contain-box-l2 i{
            width: 5px;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            color: gainsboro;
            margin-right: 10px;
            float: right;
        }
        .left-contain-box-l2 li:hover{
            cursor: pointer;
            color: white;
            background-color: #0099CC;
            border-left: 5px white solid;
            border-right: 5px #0099CC solid;
        }

        li.index-expand{
            padding-left: 15px;
        }
        li.index-plane{

        }

        .main-content-box{
            width: 100%;
        }


    </style>



</head>

<body>
<div class="full-screen-box">
    <div class="top-layer-box">
        <div class="main-content-box">
            <div class="collapse-btn" style="float: left;">
                <button style="height: 30px;width: 35px; margin: 10px;"><i style="color: #336699; font-size: 18px" class="fa fa-th"></i></button>
            </div>
        </div>
    </div>
    <div style="height: 50px"></div>
    <div class="middle-layer-box">
        <div class="left-contain-box">
            <ul>
            </ul>
            <div style="height: 50px"></div>
        </div>
        <div class="right-contain-box">
        </div>
        <div style="height: 50px;"></div>
    </div>
    <div class="bottom-layer-box">
        <div class="main-content-box">
            <div style="float: left;width: 97%;margin: 5px;border-radius: unset">
                <input style="width: 100%;font-size: 22px;font-family: 'Microsoft YaHei UI Light';border: none;border-radius: unset" type="text" placeholder="快捷指令...">
            </div>
        </div>
    </div>
    </div>
</div>


</body>
</html>